
<template>
    <div>
          <!-- 面包屑导航区域 -->
        <v-breadcrumb separator="/">
        <v-breadcrumb-item :to="{ path: '/helloworld' }">首页</v-breadcrumb-item>
        <v-breadcrumb-item>权限管理</v-breadcrumb-item>
        <v-breadcrumb-item>管理员权限</v-breadcrumb-item>
        </v-breadcrumb>
        <!-- <卡片区域> -->
        <v-card>
            <!--搜索与添加区-->
            <v-row :gutter="20">
            <v-col :span="1">
              <v-button type="ghost" icon="search" shape="circle" @click="getAdminList"></v-button>
              </v-col>
            <v-col :span="8">
              <v-input icon="search" placeholder="请输入内容"  v-model="query" clearable @clear="getAdminList">
              </v-input>
            </v-col>
            <v-col :span="4">
              <!-- <v-button  v-if="this.authority_113==true"   type="primary" @click="addDialogVisible=true">添加管理员 -->
                <v-button    type="primary" @click="addDialogVisible=true">添加管理员
              </v-button>
            </v-col>
          </v-row>
        </v-card>

        <!--管理员列表区-->
 <el-table :data="Adminlist" height="450" style="width: 100%" border stripe >
      <el-table-column type="index"> </el-table-column>
      <el-table-column label="管理员ID" prop="id" > </el-table-column>
      <el-table-column label="昵称" prop="name"> </el-table-column>
      <el-table-column label="操作" > 
      <template  slot-scope="scope">
              <!-- <管理员编辑修改区> -->
               <el-tooltip  effect="dark" content="修改"  placement="top" :enterable="false">
               <el-button  type="primary" icon="el-icon-edit" size="mini"  @click="showEditDialog(scope.row)"></el-button>
               </el-tooltip>
              <!--删除-->
               <el-tooltip class="item" effect="dark" content="删除" placement="top" :enterable="false">
              <el-button  type="danger" icon="el-icon-delete"  size="mini" @click="removeAdminById(scope.row.id)"></el-button>
               </el-tooltip>
              <!--查看-->
               <el-tooltip  class="item" effect="dark" content="权限管理" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting"  size="mini" @click="setAdminAuthority(scope.row)" ></el-button>
               </el-tooltip>
      </template>
      </el-table-column>
  </el-table>


    <!-- <添加管理员的对话框> -->
<v-modal title="添加管理员" :visible.sync="addDialogVisible"  @close="addDialogClosed">
  <v-form :model="addForm"  ref="addFormRef" direction="horizontal">
  <v-form-item label="管理员昵称" prop="username" :label-col="labelCol" :wrapper-col="wrapperCol">
    <v-input v-model="addForm.username"></v-input>
  </v-form-item>
   <v-form-item label="密码" prop="password" :label-col="labelCol" :wrapper-col="wrapperCol">
    <v-input v-model="addForm.password"></v-input>
  </v-form-item>
    <v-form-item label="权限设置"  :label-col="labelCol" :wrapper-col="wrapperCol">
    <div class="block">
      <el-cascader :options="options"   :show-all-levels="false" @change="handleChange" clearable></el-cascader>
    </div>
    </v-form-item>

 </v-form>
  <span slot="footer" class="dialog-footer">
    <v-button @click="addDialogVisible= false">取 消</v-button>
    <v-button type="primary"  @click="addAdmin"> 确 定</v-button>
  </span>
</v-modal>

<!-- <修改管理员的对话框> -->
<v-modal title="修改管理员" :visible.sync="editDialogVisible"  @close="editDialogClosed">
  <v-form ref="editFormRef" :model="editForm"   direction="horizontal">
  <v-form-item label="管理员昵称" prop="username" :label-col="labelCol" :wrapper-col="wrapperCol">
    <v-input v-model="editForm.username" ></v-input>
  </v-form-item>
<v-form-item label="密码" prop="password" :label-col="labelCol" :wrapper-col="wrapperCol">
    <v-input v-model="editForm.password" ></v-input>
  </v-form-item>
  <v-form-item label="更改权限"  :label-col="labelCol" :wrapper-col="wrapperCol">
  <div class="block">
    <el-cascader :options="options"   :show-all-levels="false" @change="handleChange2" clearable></el-cascader>
  </div>
</v-form-item>
  </v-form>
  <span slot="footer" class="dialog-footer">
    <v-button @click="editDialogVisible= false">取 消</v-button>
    <v-button type="primary" @click="editAdmin">确 定</v-button>
  </span>
</v-modal>
    

    </div>
</template>

<script>
import {getAdminList,deleteAdmin,addAdmin,updateAdmin} from '../../util/api.js'
export default {
 
    data()
    {
        return{
         
            query:'',
            id:'',
            token:'',
            username:'',
            password:'',
            Adminlist:[],
            authorityList:[],
            labelCol: {span: 6},
            wrapperCol: {span: 14},
            ownAuthorityList:[],
            ownAuthority:[],
            //添加管理员的对话框
          addDialogVisible:false,
        
           //添加聊天室的数据表单
          addForm:{
              id:'',
              username:'',
              password:'',
              authority:[]
           },
           //修改聊天室信息
          editDialogVisible:false,
           editForm:{
              id:'',
              username:'',
              password:'',
              authority:[]
           },
           options:[{
            "label":"权限关系",
            "value":1,
            "children":[
                {
                    "label":"人事管理",
                    "value":100,
                    "children":[
                      {
                          "label":"管理员信息管理",
                          "value":110,
                          "children":[
                              {"label":"查看管理员信息","disable":true,"value":111},
                              {"label":"查看管理员权限","disable":true,"value":112},
                              {"label":"添加管理员","value":113},
                              {"label":"删除管理员","value":114},
                              {"label":"修改管理员权限","value":115},
                              {"label":"修改管理员信息","value":116},
                          ]
                      },
                      {
                          "label":"用户信息管理",
                       "value":120,
                       "children":[
                           {"label":"查看用户信息","value":121},
                           {"label":"删除用户信息","value":122},
                           {"label":"修改用户信息","value":123},
                           {"label":"查看用户群聊列表","value":124},
                           {"label":"查看用户好友列表","value":125},
                       ]
            
                   }
               ]

            },
        {
            "label": "聊天信息管理",
            "value":200,
             "children":[
                 {
                  "label": "聊天室信息管理",
                  "value":210,
                 "children":[   
                     {"label":"查看聊天室信息","value":211},
                     {"label":"删除聊天室","value":212},
                     {"label":"查看聊天室消息记录","value":213},
                     {"label":"修改聊天室信息","value":214},
                     {"label":"查看所有消息记录","value":215},
                 ]
                 },
                 {
                    "label":"系统消息管理",
                    "value":220,
                    "children":[
                        {"label":"发送信息","value":221},
                    ]
                 }
                ]
            }
            ],
        }]
        }
        
    },
    created(){
       this.token= window.sessionStorage.getItem('token')
       this.id= window.sessionStorage.getItem('id')
       //更新自己权限
        this.ownAuthority =JSON.parse(window.sessionStorage.getItem('authority'))
        // console.log(this.ownAuthority)
        // this.setOwnAuthority()
        this.getAdminList()
    },
    methods:{
      async getAdminList(){
          const result =await this.$http.post(getAdminList,
          {
            'token':this.token
          })
            console.log(result)
            if(result.status!==200) return this.$message.console.error("获取数据失败！");
            this.Adminlist=result.data.list
            this.$message.success("获取数据成功")    
      },
      // setOwnAuthority()
      // {
      //   console.log(this.ownAuthorityList[0].children[0].children[0])
      //   if(this.ownAuthorityList[0].children[0].children[0].state==true)
      //   {this.authority_111=true}

      //   if(this.ownAuthorityList[0].children[0].children[1].state==true)
      //   {this.authority_112=true}

      //   if(this.ownAuthorityList[0].children[0].children[2].state==true)
      //   {this.authority_113=true}

      //   if(this.ownAuthorityList[0].children[0].children[3].state==true)
      //   {this.authority_114=true}

      //    if(this.ownAuthorityList[0].children[0].children[4].state==true)
      //   {this.authority_115=true}

      //   if(this.ownAuthorityList[0].children[0].children[5].state==true)
      //   {this.authority_116=true}

      //   console.log(this.authority_113)
      //   },
        
      setAdminAuthority(e){
        console.log(e)
        this.$router.push({path:'/myright',query:{
          authorityList:e.authorityList
        }
        })
      },
      handleChange:function(e)
      {
        //留下权限
        console.log(e)
        this.authorityList=e
        
      },
       handleChange2:function(e)
      {
        //留下权限
        console.log(e)
        this.authorityList=e
        
      },
        
       
    //添加管理员
    addAdmin(){
            this.$refs.addFormRef.validate(async valid=>{
                 console.log(valid)
                if(!valid) return
                console.log(this.token)
                console.log(this.addForm.username)
                console.log(this.addForm.password)
                console.log(this.ownAuthority)
                const result =await this.$http.post(addAdmin,
                    {
                      'token':this.token,
                      'admin':{
                        'name':this.addForm.username,
                        'password':this.addForm.password,
                        'authority': this.ownAuthority                    
                      }
                    })
                console.log(result)
                //通过可以发送添加的请求
                this.$message.success("添加成功");

                this.addDialogVisible=false;
                //重新获取列表
                this.getAdminList()
             })
        },
    
    addDialogClosed(){
            this.$refs.addFormRef.resetFields();
        },

    showEditDialog(id){
            console.log(id)
            this.editDialogVisible=true
            this.editForm.id=id.id
            this.editForm.username=id.name
            this.editForm.password=id.password;

        },
        //监听修改用户对话框的关闭事件
  editDialogClosed(){
            this.$refs.editFormRef.resetFields()

        },
       
  editAdmin(){
            this.$refs.editFormRef.validate(async valid=>{
                // console.log(valid)
                if(!valid) return
                //发起修改用户信息的请求
                console.log(this.editForm.id)
                const result =await this.$http.post(updateAdmin,
                    {
                      'token':this.token,
                      'admin':{
                        'id':this.editForm.id,
                        'username':this.editForm.username,
                        'password':this.editForm.password,
                        'authority':this.ownAuthority
                      }
                    })
                console.log(result)
                //提示更新成功
                this.$message.success('更新管理员权限成功')
                //关闭对话框
                this.editDialogVisible=false
                //刷新列表
                this.getAdminList()
               
            })
        },
  async removeAdminById(id){
            console.log(id)
            //先弹框询问
          const confirmResult=await this.$confirm('此操作将永久删除该管理员, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=> err)
        if(confirmResult!='confirm')
        {
            return this.$message.info('已经取消删除')
        }
        else{
            //删除管理员
         const result =await this.$http.post(deleteAdmin,
        {
          'token':this.token,
          'objectId':id
        })
        console.log(result)
        if(result.data.bool==true )this.$message.success('删除管理员成功')
        else this.$message.fail("删除管理员失败")
        }
        
        this.editDialogVisible=false
                //刷新列表
        this.getAdminList()
                //提示更新成功
        this.$message.success('删除管理员成功')

    }
}
}
       

</script>
<style lang="less" scoped>


</style>